<template>
  <data-table-app-page>
    <div slot="toolbar">
      <el-form inline :model="searchForm">
        <el-form-item
          label="商家工号"
          v-if="!$params.boss && $auth('query-by-admin')">
          <el-input v-model="searchForm.adminUsername" clearable style="width: 120px"></el-input>
          <el-button icon="el-icon-user" @click="onBossSelectClick"></el-button>
        </el-form-item>
        <el-form-item
          label="商家社区"
          v-if="!$params.boss && $auth('query-by-org')">
          <org-select v-model="searchForm.orgId" style="width:260px" />
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="searchForm.name" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="行业">
          <type-select
            v-model="searchForm.industryId"
            :items="DictMan.items('product.industry')"
            style="width: 110px"
          />
        </el-form-item>
        <el-form-item>
          <data-table-query-button :query-params="searchForm" />
        </el-form-item>
      </el-form>
      <el-button
        v-auth:add
        type="primary"
        icon="el-icon-plus"
        @click="onAddClick"
      >
        新建
      </el-button>
    </div>
    <data-table
      ref="table"
      url="/api/shop/pro/proPage"
      lazy
    >
      <el-table-column prop="imgUrl" label="店铺图片" width="80" v-slot="{row}">
        <el-image
          :src="row.imgUrl"
          fit="cover"
          :preview-src-list="[row.imgUrl]"
          style="width: 60px; height: 60px; border-radius: 4px;"
        />
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="270" show-overflow-tooltip></el-table-column>
      <el-table-column prop="industryText" label="所属行业" width="80"></el-table-column>
      <el-table-column prop="linkman" label="联系人" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="telephone" label="联系电话" width="120"></el-table-column>
      <el-table-column prop="adminUsername" label="商家工号" width="90" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作"min-width="416" fixed="right" v-slot="{row}">
        <el-dropdown
          v-auth:order
          @command="onOrderCommand($event, row)"
        >
          <el-button
            type="primary"
            plain
            split-button
            @click="onOrderClick(row)"
          >
            订单管理<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="order-manage" icon="el-icon-s-order">订单管理</el-dropdown-item>
            <el-dropdown-item command="order-stat" icon="el-icon-data-analysis">订单统计</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown
          v-auth:trade
          @command="onTradeCommand($event, row)"
        >
          <el-button
            type="primary"
            plain
            split-button
            @click="onTradeClick(row)"
          >
            交易流水<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="trade-manage" icon="el-icon-document">交易流水</el-dropdown-item>
            <el-dropdown-item command="trade-stat" icon="el-icon-data-analysis">交易统计</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          v-auth:bill
          type="primary"
          plain
          @click="onBillClick(row)"
        >
          账单
        </el-button>
        <el-dropdown v-auth="['product', 'employee', 'service', 'update', 'business-mode']" @command="onCommand($event, row)">
          <el-button
            type="primary"
            plain
            split-button
          >
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-auth:product command="product" icon="el-icon-s-goods">{{row.industryId == 'activity' ? '活动' : '商品'}}</el-dropdown-item>
            <el-dropdown-item v-auth:employee command="employee" icon="el-icon-user">服务人员</el-dropdown-item>
            <el-dropdown-item v-auth:service command="service" icon="el-icon-water-cup">卡服务</el-dropdown-item>
            <el-dropdown-item v-auth:update command="edit" icon="el-icon-edit" divided>修改</el-dropdown-item>
            <el-dropdown-item v-auth:business-mode command="businessMode" icon="el-icon-setting">派单模式设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          @click="onDetailsClick(row)"
        >
          详情
        </el-button>
      </el-table-column>
    </data-table>

    <dispatch-order-mode-settings ref="dispatchOrderModeSettings" />
    <boss-query-selector ref="bossQuerySelector" />
  </data-table-app-page>
</template>


<script>
import { Select } from 'element-ui';

export default {
  pageProps: {
    title: '店铺管理'
  },
  components: {
    OrgSelect: () => ({ component: import('@/pages/org/OrgSelect.vue'), loading: Select, delay: 0 }),
    DispatchOrderModeSettings: () => import('./DispatchOrderModeSettings.vue'),
    BossQuerySelector: () => import('@/pages/shop/BossQuerySelector.vue')
  },
  data() {
    return {
      permission: '/pension_service_center/provider/shop',
      searchForm: {
        adminUsername: this.$params.boss && this.$params.boss.username,
        name: ''
      }
    }
  },
  mounted() {
    this.$refs.table.query(this.searchForm);
  },
  methods: {
    onBossSelectClick() {
      this.$refs.bossQuerySelector.show({
        onOk: (boss) => {
          this.searchForm.adminUsername = boss.username;
          return true;
        }
      });
    },
    onDetailsClick(shop) {
      this.pushPage({
        path: '/shop/shop/details',
        params: { shop },
        key: shop.id
      });
    },
    onAddClick(shop) {
      this.pushPage({
        path: '/shop/shop/edit',
        key: 'add',
        title: '新建店铺',
        params: {
          mode: 'add',
          onSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        },
      });
    },
    onOrderCommand(cmd, shop) {
      switch (cmd) {
        case 'order-manage':
          this.onOrderClick(shop);
          break;
        case 'order-stat':
          this.pushPage({
            path: '/shop/stat/order',
            params: {
              providerId: shop.id
            },
            key: shop.id,
            subTitle: shop.name
          });
          break;
      }
    },
    onOrderClick(shop) {
      if (shop.industryId == 'integral_mall') {
        this.openTab({
          url: '/shop/order/index.do?providerId=' + shop.providerId + '&industryId=' + shop.industryId,
          title: shop.name + " - " + "订单管理"
        });
      } else {
        this.pushPage({
          path: '/shop/order',
          subTitle: shop.name,
          params: { shop },
          key: shop.id
        });
      }
    },
    onTradeCommand(cmd, shop) {
      switch (cmd) {
        case 'trade-manage':
          this.onTradeClick(shop);
          break;
        case 'trade-stat':
          this.pushPage({
            path: '/shop/stat/trade',
            params: {
              providerId: shop.id
            },
            key: shop.id,
            subTitle: shop.name
          });
          break;
      }
    },
    onTradeClick(shop) {
      this.pushPage({
        path: '/shop/finance/trade',
        subTitle: shop.name,
        params: { shop },
        key: shop.id
      });
    },
    onBillClick(shop) {
      this.pushPage({
        path: '/shop/finance/bill',
        params: { shop },
        key: shop.id
      });
    },
    onCommand(cmd, shop) {
      switch (cmd) {
        case 'product':
          if(shop.industryId == "activity") {
            this.openTab({
              url: "/activity/index.do?providerId=" + shop.providerId + '&_func_code=activityManager',
              title: shop.name + " - 活动管理"
            });
          } else {
            this.openTab({
              url: "shop/product/index.do?providerId=" + shop.providerId,
              title: shop.name + " - 商品管理"
            });
          }
          break;
        case 'service':
          this.openTab({
            url: 'view/shop/proService/index.do?_func_code=shop&providerId=' + shop.providerId,
            title: shop.name + ' - 卡服务管理'
          });
          break;
        case 'employee':
          this.openTab({
            url: 'view/shop/employee/index.do?_func_code=shop&providerId=' + shop.providerId,
            title: shop.name + ' - 服务人员管理'
          });
          break;
        case 'edit':
          this.pushPage({
            path: '/shop/shop/edit',
            title: '修改店铺',
            params: {
              mode: 'update',
              shop,
              onSuccess: () => {
                this.$refs.table.reloadCurrentPage();
              }
            }
          });
          break;
        case 'businessMode':
          this.$refs.dispatchOrderModeSettings.show(shop);
          break;
      }
    }
  }
}
</script>

<style scoped>
.cell > .el-button--small {
  margin-left: 0px;
}
</style>
